<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">接单</a>
        </script>

    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../js/axios.min.js"></script>
<script>

    var engineerProvince, engineerCity, engineerArea, engineerId;
    axios.defaults.withCredentials = true


    layui.use(['form', 'table','layarea'], function () {
        //引入layui集成的包
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layarea = layui.layarea;

        axios.get('http://localhost:8080/engineer/getEngineerAddress',{
            withCredentials: true
        }).then(function(res){
            var data = res.data.data
            console.log(data)
            /*返回数据实例
            {
                "code": 0,
                "count": 0,
             "data": {
                    "engineerProvince": "天津市",
                     "engineerCity": "天津市",
                       "engineerArea": "西青区"
                     }
            }
            * */

            layarea.render({
                elem: '#picker',

                data: {
                    province: data.engineerProvince,
                    city: data.engineerCity,
                    county: data.engineerArea
                },

            });
        })



        axios.get('http://localhost:8080/order/getOrdersFinishedEngineer', {
            withCredentials: true

        })
            .then(function (response) {
                // 请求成功的处理逻辑
                var tableData = response.data.data;
                // 定义每页显示的数量和当前页码
                var pageSize = 10; // 每页显示10条数据
                var currentPage = 1; // 当前页码为1

                // 计算需要显示的数据范围
                var startIndex = (currentPage - 1) * pageSize;
                var endIndex = startIndex + pageSize;

                // 提取需要显示的数据
                var currentPageData = tableData.slice(startIndex, endIndex);


                // 定义数据表格的配置项
                var tableConfig = {
                    elem: '#currentTableId',
                    data: tableData, // 设置完整的数据列表
                    page: true, // 开启分页
                    limit: pageSize, // 每页显示的数量
                    cols: [[
//                        {type: "checkbox", width: 50},
                        {field: 'userName', width: 70, title: '用户'},
                        {field: 'orderClientname', width: 70, title: '姓名'},
                        {field: 'orderStatus', width: 100, title: '状态', templet: '#staTpl'},
                        {field: 'productType', width: 150, title: '产品型号', sort: true},
                        {field: 'orderDescription', width: 250, title: '订单描述'},
                        {field: 'orderPriority', width: 100, title: '优先级',sort: true, templet: '#priorTpl', sort: true},
                        {field: 'orderClientphone', width: 140, title: '用户手机号',},
//                        {field: 'orderDate', width: 110, title: '日期', sort: true},
//                        {field: 'orderTime', width: 110, title: '时间', templet: '#timeTpl', sort: true},
                        {field: 'orderDateTime', width: 160, title: '日期时间', templet: '#dateTimeTpl', sort: true},
                        {field: 'orderArea', width: 80, title: '区县'},
                        {field: 'orderAddress', width: 200, title: '详细地址',},

//                        {field: 'orderPicture', width: 110, title: '图片',},
//                        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}

                        {fixed: 'right', title:'日志', toolbar: '#operationBar',width: 170}

                    ]],
                    // 设置初始排序
                    initSort: {
                        field: 'orderPriority',
                        type: 'desc' // 降序排列
                    }
                };

                // 渲染表格
                var tableInstance = table.render(tableConfig);

                // 监听分页切换事件
                table.on('page(currentTableFilter)', function(obj) {
                    // 更新当前页码
                    currentPage = obj.curr;

                    // 计算需要显示的数据范围
                    var startIndex = (currentPage - 1) * pageSize;
                    var endIndex = startIndex + pageSize;

                    // 提取需要显示的数据
                    var currentPageData = dataList.slice(startIndex, endIndex);

                    // 更新表格数据
                    tableInstance.reload({
                        data: currentPageData
                    });
                });
                axios.get('http://localhost:8080/engineer/getEngineerAddress',{
                    withCredentials: true

                }).then(function(res){
                    var data = res.data.data
                    console.log(data)
                    /*返回数据实例
                    {
                        "code": 0,
                        "count": 0,
                     "data": {
                            "engineerProvince": "天津市",
                             "engineerCity": "天津市",
                               "engineerArea": "西青区"
                             }
                    }
                    * */
                    layarea.render({
                        elem: '#picker',

                        data: {

                            province: data.engineerProvince,
                            city: data.engineerCity,
                            county: data.engineerArea
                        },

                    });

                })

            })
            .catch(function (error) {
                console.log(document.cookie)
                // 请求失败的处理逻辑
                console.error(error);
            });


        // 监听搜索操作
        setInterval(function() {
            table.reload('currentTableId');
            console.log("refreshed");
        }, 10000);

        // 监听表格行工具栏事件
        table.on('tool(currentTableFilter)', function(obj){
            var data = obj.data;
            var orderId = data.orderId;
            console.log(data);
            if(obj.event === 'detail'){
                showOrderLog(orderId);
            }
            if(obj.event === 'viewFlow'){
                showFlowDetail(orderId);
            }
        });
        function showFlowDetail(orderId) {
            layer.open({
                type: 1,
                title: '流水明细',
                area: ['800px', '600px'],
                content: '<table class="layui-table" id="flowTable"></table>',

                success: function(layero, index){
                    var form = new FormData();
                    form.append("orderId",orderId);
                    console.log(orderId);
                    // 发送请求获取流水明细数据
                    axios.post('http://localhost:8080/money/findOne',form, {
                        withCredentials: true,
                    })
                        .then(function (response) {
                            var rdata = response.data;
                            console.log(rdata);
                            // 表格渲染
                            table.render({
                                elem: '#flowTable',
                                data: rdata.data,
                                page: true,
                                limit: 10,
                                cols: [[
                                    {field: 'sysName', title: '用户', width: 120},
                                    {field: 'money', title: '金额', width: 100},
                                    {field: 'logTime', title: '操作时间', width: 180},
                                    {field: 'logDescription', title: '描述'}
                                ]]
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            });
        }
        function showOrderLog(orderId) {
            layer.open({
                type: 1,
                title: '订单日志',
                area: ['1000px', '600px'],
                content: '<table class="layui-table" id="logTable"></table>',
                success: function(layero, index){
                    // 表格渲染
                    table.render({
                        elem: '#logTable',
                        url: 'http://localhost:8080/order/getLogs/' + orderId,
                        method: 'GET',
                        page: true,
                        limit: 10,
                        cols: [[
                            // {field: 'orderId', title: '订单号',hide: true},
                            // {field: 'userName', title: '用户',width: 60,},
                            // {field: 'productId', title: '产品ID',hide: true},
                            {field: 'engineerName', title: '工程师',width: 120,},
                            {field: 'logStatus', width:80, title: '状态',templet: '#logStatusTpl'},
                            // {field: 'orderPriority', width:80, title: '优先级'},

                            // {field: 'orderDate', title: '预约日期',hide: true,sort:true},
                            // {field: 'orderTime', title: '预约时间',hide: true},
                            {title: '操作时间',templet: '#logTimeTpl',width:180},

                            // {field: 'orderClientphone', title: '客户电话',width:120},

                            // {title: '地址',templet: '#AddressTpl',width:158},
                            // {field: 'orderAddress',width:175,minWidth:175,title: '详细地址'},

                            {field: 'logDescription', minWidth:175,title: '描述'},
                            // {field: 'orderProvince', title: '省地址',hide: true},
                            // {field: 'orderCity', title: '市地址',hide: true},
                            // {field: 'orderArea', title: '区地址',hide: true},
                            // {fixed: 'right', title:'操作', toolbar: '#operationBar',width: 70}
                        ]]
                    });
                }
            });

        }
    });
    function formatTime(time) {
        if (time === 0) {
            return '上午';
        } else if (time === 1) {
            return '下午';
        } else if (time === 2) {
            return '晚上';
        } else {
            return '';
        }
    }
</script>
<script type="text/html" id="timeTpl">
    {{#  if(d.orderTime === 0){ }}
    上午
    {{#  } else if(d.orderTime === 1) { }}
    下午
    {{#  } else if(d.orderTime === 2) { }}
    晚上
    {{#  } }}
</script>
<script type="text/html" id="staTpl">
    {{#  if(d.orderStatus === 0){ }}
    未接单
    {{#  } else if(d.orderStatus === 1) { }}
    已接单
    {{#  } else if(d.orderStatus === 2) { }}
    待审核
    {{#  } else if(d.orderStatus === 3) { }}
    已完成
    {{#  } else if(d.orderStatus === 4) { }}
    订单被退回
    {{#  } }}
</script>
<script type="text/html" id="dateTimeTpl">
    {{ layui.util.toDateString(d.orderDate, 'yyyy-MM-dd') + ' ' + formatTime(d.orderTime) }}
</script>
<script type="text/html" id="priorTpl">
    {{#  if(d.orderPriority === 0){ }}
    正常
    {{#  } else if(d.orderPriority === 1) { }}
    较高
    {{#  } else if(d.orderPriority === 2) { }}
    高
    {{#  } else if(d.orderPriority === 3) { }}
    非常高
    {{#  } }}
</script>

<script type="text/html" id="logStatusTpl">
    {{# if(d.logStatus === 0){ }}
    已提交
    {{# } else if(d.logStatus === 1){ }}
    已接单
    {{# } else if(d.logStatus === 2){ }}
    待确认
    {{# } else if(d.logStatus === 3){ }}
    已完成
    {{# } else if(d.logStatus === 4){ }}
    未完结
    {{# } }}
</script>

<script type="text/html" id="logTimeTpl">
    {{d.logTime.substring(0,10)}} {{d.logTime.substring(11,19)}}
</script>

<script type="text/html" id="operationBar">
    {{# if(d.orderStatus === 3){ }}
    <div style="text-align: left;">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">日志</a>
        <a class="layui-btn layui-btn-normal layui-bg-blue layui-btn-xs" lay-event="viewFlow">查看流水</a>
    </div>

    {{# } else { }}
    <div style="text-align: left;">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">日志</a>
    </div>

    {{# } }}
</script>

</body>
</html>